{extend name="public/container"}
{block name='head_top'}
<script type="text/javascript" charset="utf-8" src="{__ADMIN_PATH}plug/ueditor/third-party/zeroclipboard/ZeroClipboard.js"></script>
<script type="text/javascript" charset="utf-8" src="{__ADMIN_PATH}plug/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="{__ADMIN_PATH}plug/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" src="{__ADMIN_PATH}plug/ueditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" src="{__PC_KS3}src/async.min.js"></script>
{/block}
{block name="content"}
<style type="text/css">
    .categories {
        margin-top: 20px;
    }
    .categore-item {
        width: 200px;
        padding: 6px 0;
    }

    .categore-item:not(:last-child) {
        border-bottom: 1px solid var(--borderColor);
    }

    /** 分销弹窗样式重置开始 */
    .avatar-uploader .el-upload {
        width: 200px;
        height: 300px;
    }
    .el-dialog__body {padding: 10px 20px;}
    .el-form-item {margin-bottom: 18px;}
    /** 分销弹窗样式重置开始 */
</style>
<div id="myApp" v-cloak>
    <div class="flex shot-list-wrap padding-10">
        <div class="shot-list-left">
            <div class="">
                <el-button type="primary" icon="el-icon-plus" size="mini" @click="doAddCategory()">添加分类</el-button>

                <div class="flex categories flex-column">
                    <div class="flex flex-between categore-item" v-for="item in categories">
                        <div @click="cateFilter(item.id)">
                            <el-link :underline="false" type="primary" v-if="item.id==0">{{item.cate_name}}</el-link>
                            <el-link :underline="false" v-else>{{item.cate_name}}</el-link>
                          （{{item.contains}}）
                        </div>
                        <div v-if="item.id > 0">
                            <el-button type="text" size="mini" icon="el-icon-edit" @click="doAddCategory(item)" style="margin:0"></el-button>
                            <el-button type="text" size="mini" icon="el-icon-delete" @click="doDeleteCategory(item.id)" style="margin:0"></el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="shot-list-right">
            <div class="douxue-filter flex flex-between" style="margin-bottom:20px;">
                <el-form :inline="true" :model="where" size="mini" class="flex">
                    <div class="flex flex-between">
                        <el-form-item label="所属{:lang('Organ')}" v-if="!disable_organ">
                            <el-select
                            :clearable=true
                            placeholder="所属{:lang('Organ')}"
                            @change="doSwitchOrgan"
                            :disabled="organs.length==0"
                            v-model="where.org_id">
                                <el-option v-for="item in organs" :label="item.organ_name" :key="item.id" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="所属{:lang('School')}" v-if="!disable_school">
                            <el-select
                            :clearable=true
                            placeholder="所属{:lang('School')}"
                            v-model="where.school_id"
                            :disabled="schools.length==0"
                            filterable>
                                <el-option v-for="item in schools" :label="item.school_name" :key="item.id" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item>
                            <el-input size="small" v-model="where.name" placeholder="{:lang('Service')}名称">
                                <el-button slot="append" size="small" type="primary" @click="doLoadRows(1)" icon="el-icon-search"></el-button>
                            </el-input>
                        </el-form-item>
                    </div>
                </el-form>

                <el-button type="primary" size="mini" @click="doAdd()">新增{:lang('Service')}</el-button>
            </div>
            <div class="">
                <el-table
                    :data="rows"
                    style="width: 100%"
                    v-loading="loading"
                    element-loading-text="加载中"
                    element-loading-spinner="el-icon-loading"
                    size="mini">
                    <el-table-column
                        prop="id"
                        label="ID"
                        width="60"
                        align="left">
                    </el-table-column>
                    <el-table-column
                        v-if="!disable_organ"
                        prop="organ_name"
                        label="{:lang('Organ')}名称"
                        align="left">
                    </el-table-column>
                    <el-table-column
                        v-if="!disable_school"
                        prop="school_name"
                        label="{:lang('School')}名称"
                        align="left">
                    </el-table-column>
                    <el-table-column
                        prop="name"
                        label="{:lang('Service')}名称"
                        align="left">
                    </el-table-column>
                    <el-table-column
                        prop="cate_name"
                        label="分类名称"
                        align="left">
                    </el-table-column>
                    <el-table-column
                        prop="price"
                        label="售价"
                        align="left">
                    </el-table-column>
                    <el-table-column
                        prop="original_price"
                        label="原价"
                        align="left">
                    </el-table-column>
                    <!-- <el-table-column
                        prop="cover"
                        label="封面图"
                        width="140"
                        align="center">
                        <template slot-scope="scope">
                            <el-image
                                v-if="scope.row.cover.pic != undefined "
                                style="height: 60px"
                                fit="contain"
                                :src="scope.row.cover.pic "
                                :preview-src-list="[scope.row.cover.pic]">
                            </el-image>
                            <div v-else class="image-slot">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </template>
                    </el-table-column> -->
                    <el-table-column
                        label="推荐至前台"
                        align="left">
                        <template slot-scope="scope">
                            <el-switch
                                v-model="scope.row.is_rmt"
                                active-color="#ff6a6c"
                                inactive-color="#999"
                                :active-value="1"
                                :inactive-value="0"
                                @change="doSetIsRmt(scope.row)">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="状态"
                        align="left">
                        <template slot-scope="scope">
                            <el-switch
                                v-model="scope.row.status"
                                active-color="#ff6a6c"
                                inactive-color="#999"
                                :active-value="1"
                                :inactive-value="0"
                                @change="doSetStatus(scope.row)">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="分销"
                        width="80"
                        align="left">
                        <template slot-scope="scope">
                            <el-link :underline="false" type="success" v-if="scope.row.sp_is_open==1">已参与</el-link>
                            <el-link :underline="false" type="default" v-else>未参与</el-link>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="操作"
                        fixed="right"
                        width="140"
                        align="left">
                        <template slot-scope="scope">
                            <el-link type="primary" size="mini" :underline="false" @click="doAdd(scope.row.id)">编辑</el-link>
                            <el-link type="warning" size="mini" :underline="false" @click="doSeparate(scope.row)" v-if="disable_school">分销</el-link>
                            <el-link type="danger" size="mini" :underline="false" @click="doDelete(scope.row.id)">删除</el-link>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination
                        small
                        :hide-on-single-page="true"
                        layout="prev, pager, next"
                        :total="rowsCount"
                        :page-size="where.limit"
                        @current-change="doLoadRows">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加/编辑类别   -->
    <el-dialog title="添加/编辑" :visible.sync="categoryDialogFormVisible" :close-on-click-modal="false">
        <el-form :model="category" :rules="categoryRules" ref="categoryFormData" label-width="100px" >
            <el-form-item label="分类名称" prop="cate_name">
                <el-input v-model="category.cate_name" maxlength="8" show-word-limit placeholder="分类名称" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmitCategory('categoryFormData')">确 定</el-button>
                <el-button @click="categoryDialogFormVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <!-- 分销设置 -->
    <el-dialog title="分销设置" :visible.sync="separateDialogFormVisible" :close-on-click-modal="false" width="70%" :fullscreen="true">
        <el-form :model="separateConfig" ref="separateConfig" label-width="100px" size="small" >
            <el-form-item label="分销开启">
                <el-switch
                    v-model="separateConfig.is_open"
                    active-color="#ff6a6c"
                    inactive-color="#999"
                    active-text=""
                    inactive-text=""
                    :active-value="1"
                    :inactive-value="0">
                </el-switch>
            </el-form-item>

            <el-form-item label="比例设置">
                <el-link :underline="false" :disabled="!separateConfig.is_open" type="primary" @click="doLoadDefaultCommission">加载默认比例</el-link>
            </el-form-item>

            <el-form-item label="">
                <el-table
                    :data="separateConfig.default_commission"
                    style="width: 100%">
                    <el-table-column
                        prop="level_name"
                        label="推广等级">
                    </el-table-column>

                    <el-table-column
                        prop="separate"
                        label="直推佣金%">
                        <template slot-scope="scope">
                            <template v-if="!separateConfig.is_open">
                                {{ scope.row.separate }}
                            </template>
                            <template v-else>
                                <el-input-number
                                    :controls="false"
                                    :min="0"
                                    :max="100"
                                    v-model="scope.row.separate"
                                    :placeholder="scope.row.level_name + '直推佣金'"
                                    autocomplete="off">
                                </el-input-number>
                            </template>
                        </template>
                    </el-table-column>

                    <el-table-column
                        prop="fission"
                        label="裂变佣金%">
                        <template slot-scope="scope">
                            <template v-if="!separateConfig.is_open">
                                {{ scope.row.separate }}
                            </template>
                            <template v-else>
                                <el-input-number
                                    :controls="false"
                                    :min="0"
                                    :max="100"
                                    v-model="scope.row.fission"
                                    :placeholder="scope.row.level_name + '裂变佣金'"
                                    autocomplete="off">
                                </el-input-number>
                            </template>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>

            <el-form-item label="海报上传">
                <el-upload
                    style="width:100%;height:100%"
                    class="avatar-uploader"
                    accept="image/jpeg,image/png"
                    action="{:Url('index/jsy_upload')}"
                    :data="{path:'separate_banner' , size_control:'750*1334', size_strict:true }"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="separateConfig.share_poster" :src="separateConfig.share_poster" class="avatar" @mouseenter="mouseOver" @mouseleave="mouseLeave">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    <div v-if="separateConfig.share_poster && showMask" class="flex flex-center flexcenter" style="position: absolute; top: 0;left: 0;width: 100%;height: 100%;background-color: #000;opacity: .8; pointer-events: none">
                        更换
                    </div>
                    <div slot="tip" class="el-upload__tip">尺寸限制为750×1334，格式jpg/png且不超过1MB</div>
                </el-upload>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="doSaveSeparateConfig()">确 定</el-button>
                <el-button @click="separateDialogFormVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
{/block}
{block name="script"}
<script>
    var my = new Vue({
        el: "#myApp",
        data(){
            return {
                categoryRules: {
                    cate_name: [
                        { required: true, message: '此项不能为空', trigger: 'blur' },
                    ]
                },
                where:{
                    org_id:default_org_id > 0 ? default_org_id : '',
                    school_id:default_school_id > 0 ? default_school_id : '',
                    cate_id:'',
                    name:'',
                    page:1,
                    limit:pageSize
                },
                loading:false,
                rowsCount: 0,
                rows: [],
                organs: [],
                schools:[],
                disable_organ: default_org_id > 0 ? true : false,
                disable_school: default_school_id > 0 ? true : false,
                categories:[],
                categoryDialogFormVisible:false,
                category:{
                    cate_name:'',
                    type:2
                },
                // 分销设置相关
                showMask:false,
                separateDialogFormVisible:false,
                separateConfig: {
                    relation_type:1,
                    relation_id:0,
                    is_open:0,
                    share_poster:'',
                    default_commission : [
                        {
                            level_key:'senior',
                            level_name:"{:lang('Senior Partner')}",
                            separate:0,
                            fission:0,
                        },
                        {
                            level_key:'first',
                            level_name:"{:lang('First Partner')}",
                            separate:0,
                            fission:0,
                        },
                        {
                            level_key:'second',
                            level_name:"{:lang('Second Partner')}",
                            separate:0,
                            fission:0,
                        },
                        {
                            level_key:'third',
                            level_name:"{:lang('Third Partner')}",
                            separate:0,
                            fission:0,
                        }
                    ]
                },
            }
        },
        methods: {
            doLoadOrgans () {
                axios.get(Url({c:'teachaffair.organ',a:'get_all' , q:{org_id:default_org_id}}))
                    .then(res => {
                        this.organs = res.data.data
                    })
            },
            doSwitchOrgan (org_id) {
                this.where.school_id = ''
                this.doLoadSchools(org_id)
            },
            doLoadSchools (org_id) {
                axios.get(Url({c:'supervision.school',a:'get_all' , q:{org_id:org_id}}))
                    .then(res => {
                        this.schools = res.data.data
                    })
            },
            cateFilter (cate_id) {
                this.where.cate_id = cate_id
                this.doLoadRows()
            },
            doLoadRows (page) {
                this.loading = true
                this.where.page  = page || 1
                axios.get(Url({a:'get_list' , q:this.where}))
                    .then(res => {
                        this.rows = res.data.data
                        this.rowsCount =res.data.count
                        this.loading = false
                    })
            },
            doSetStatus (row) {
                axios.get(Url({a:'set_status',q:{status:row.status,id:row.id}}))
                    .then(res => {
                        this.$message({
                            message: res.data.msg,
                            type: res.data.code === 200 ? 'success' : 'error',
                            onClose: _ => {
                                if (res.data.code !== 200) {
                                    this.doLoadRows()
                                }
                            }
                        })
                    })
            },
            // 推荐至前台
            doSetIsRmt (row) {
                axios.get(Url({a:'set_status',q:{status:row.is_rmt,id:row.id,field:'is_rmt'}}))
                    .then(res => {
                        this.$message({
                            message: res.data.msg,
                            type: res.data.code === 200 ? 'success' : 'error',
                            onClose: _ => {
                                if (res.data.code !== 200) {
                                    this.doLoadRows()
                                }
                            }
                        })
                    })
            },
            doAdd (id) {
                window.location.href = Url({a:'add',q:{id:id}})
            },
            doDelete (id) {
                this.$confirm('确认删除该条记录?').then(_ => {
                    axios.get(Url({a:'delete' , q:{id:id}})).then(res => {
                        this.$message({
                            message: res.data.msg,
                            type: res.data.code === 200 ? 'success' : 'error',
                        })
                    }).catch(_ => {
                        this.$message({
                            message: '删除失败',
                            type: 'error'
                        })
                    })

                    return this.doLoadRows();
                }).catch(_ => {})
            },
            doLoadCategories () {
                axios.get(Url({c:'category.category',a:'get_list' , q:{type:this.category.type}}))
                    .then(res => {
                        this.categories = res.data.data
                    })
            },
            doAddCategory (item) {
                if ( item != undefined ) {
                    this.category.id = item.id || 0
                    this.category.cate_name = item.cate_name || ''
                } else {
                    this.category.id = 0
                    this.category.cate_name = ''
                }

                this.categoryDialogFormVisible = true
            },
            doDeleteCategory (id) {
                this.$confirm('确认删除该条记录?').then(_ => {
                    axios.get(Url({c:'category.category',a:'delete' , q:{id:id}})).then(res => {
                        this.$message({
                            message: res.data.msg,
                            type: res.data.code === 200 ? 'success' : 'error',
                        })
                    }).catch(_ => {
                        this.$message({
                            message: '删除失败',
                            type: 'error'
                        })
                    })

                    return this.doLoadCategories(1);
                }).catch(_ => {})
            },
            onSubmitCategory (formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios.post( Url({c:'category.category',a:'save'}) , this.category)
                            .then(res => {
                                this.$message({
                                    message:'操作成功',
                                    type:'success',
                                    duration:1500
                                });
                                this.categoryDialogFormVisible = false;
                                this.doLoadCategories(1)
                            }).catch(_ => {
                            this.$message({
                                message: '操作失败',
                                type: 'error'
                            })
                        })
                    } else {
                        return false;
                    }
                });
            },
            // 分销相关设置 开始
            doSeparate (row) {
                this.separateDialogFormVisible   = true
                this.separateConfig.relation_id  = row.id || 0
                this.separateConfig.is_open      = parseInt(row.sp_is_open)
                this.separateConfig.share_poster = row.share_poster || ''

                this.loadItemSeperateConfig()
            },
            doSaveSeparateConfig () {
                if ( !this.separateConfig.share_poster ) return this.$message.error('分销海报必传');

                axios.post( Url({c:'distribution.setting',a:'save_distribution_seperate'}) , this.separateConfig)
                    .then(res => {
                        this.$message({
                            message:'操作成功',
                            type:'success',
                            duration:1500
                        });
                        this.separateDialogFormVisible = false;
                        this.doLoadRows(1)
                    }).catch(_ => {
                    this.$message({
                        message: '操作失败',
                        type: 'error'
                    })
                })
            },
            handleAvatarSuccess(res, file) {
                if ( res.code == 0 ) {
                    return this.separateConfig.share_poster = res.pic || '';
                }
                return this.$message.error(res.state);
            },
            beforeAvatarUpload(file) {
                const isLt2M = file.size / 1024 / 1024 < 1;
                const isJPG = (file.type === 'image/jpeg' || file.type === 'image/png' );
                if (!isLt2M) {
                    this.$message.error('上传图片大小不能超过 1MB!');
                }

                if (!isJPG) {
                  this.$message.error('上传图片只能是 JPG或PNG 格式!');
                }

                return isJPG && isLt2M;
            },
            mouseOver () {
                this.showMask = true;
            },
            mouseLeave() {
                this.showMask = false;
            },
            doLoadDefaultCommission () {
                axios.get(Url({c:'supervision.school',a:'default_commission' , q:{school_id:default_school_id}}))
                .then(res => {
                    this.separateConfig.default_commission = res.data.data
                })
            },
            loadItemSeperateConfig ( ) {
                axios.get(Url({c:'distribution.setting',a:'get_distribution_seperate' , q:{relation_type:this.separateConfig.relation_type,relation_id:this.separateConfig.relation_id}}))
                .then(res => {
                    this.separateConfig.default_commission = res.data.data
                })
            }
            // 分销相关设置 结束
        },
        mounted(){
            this.doLoadRows()
            this.doLoadCategories()

            this.doLoadOrgans()
            if ( default_org_id > 0 || this.where.org_id > 0 ) {
                org_id = default_org_id || this.where.org_id
                this.doLoadSchools(org_id)
            }
        }
    })
</script>
{/block}